<template>
  <div class="piechart" ref="piechart">1111</div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, getCurrentInstance, watch, reactive } from "vue";

let currentInstance = "";
currentInstance = getCurrentInstance(); // 获取组件实例

onMounted(async () => {
  initCharts();
  setOptions();
});

let chart = "";

// 初始化
const initCharts = () => {
  chart = echarts.init(currentInstance.ctx.$refs.piechart);
  window.addEventListener("resize", function () {
    chart.resize();
  });
};

const setOptions = () => {
  const option = {
    title: {
      text: "满意趋势",
      textStyle: {
        color: "rgba(225, 225, 225)",
        fontFamily: "Microsoft YaHei",
        fontSize: 14,
        fontWeight: "normal",
      },
      left: 20,
      top: 10,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["满意", "一般", "差评"],
      textStyle: {
        fontSize: 10, //字体大小
        color: "#ffffff", //字体颜色
      },
      top: 15,
    },

    grid: {
      left: "3%",
      right: "6%",
      bottom: "4%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "满意",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: "一般",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [150, 232, 201, 154, 190, 330, 410],
      },
      {
        name: "差评",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [320, 332, 301, 334, 390, 330, 320],
      },
    ],
  };
  chart.setOption(option);
};
</script>

<style scoped lang="scss">
.piechart {
  width: 100%;
  height: 100%;
}
</style>
